<template>
  <div>
    <i
      :class="myIcon"
      @click="click"
      style="font-size: 18px; cursor: pointer"
      title="切换全屏"
    ></i>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
    name: 'Screenfull',
    data() {
        return {
            myIcon: 'iconfont icon-quanping',
            isFullscreen: false
        }
    },
    mounted() {
        this.init()
    },

    methods: {
        click() {
            if (!screenfull.isEnabled) {
                this.$modal.notifyWarning('you browser can not work');
                return false
            }
            screenfull.toggle()
        },
        change() {
            this.isFullscreen = screenfull.isFullscreen
            if (screenfull.isFullscreen) {
                this.myIcon = 'iconfont icon-pingmusuoxiao'
            } else {
                this.myIcon = 'iconfont icon-quanping'
            }
        },
        init() {
            if (screenfull.isEnabled) {
                screenfull.on('change', this.change)
            }
        }
    }
}
</script>

<style scoped></style>
